<template>
  <div class="view">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <NuxtLink class="brand" to="/">
            <img src="//static2.cnodejs.org/public/images/cnodejs_light.svg">
          </NuxtLink>
          <ul class="nav pull-right">
            <li><NuxtLink to="/">首页</NuxtLink></li>
            <li><NuxtLink to="/getstart">新手入门</NuxtLink></li>
            <li><NuxtLink to="/api">API</NuxtLink></li>
            <li><NuxtLink to="/about" target="">关于</NuxtLink></li>
            <li><NuxtLink to="/user/login">{{userInfo.accesstoken?'设置':'登陆'}}</NuxtLink></li>
          </ul>
        </div>
      </div>
    </div>
    <Nuxt />
    <div id="footer">
      <div id="footer_main">
        <div class="links">
          <a class="dark" href="/rss">RSS</a> | <a class="dark" href="https://github.com/cnodejs/nodeclub/">源码地址</a>
        </div>
        <div class="col_fade">
          <p>CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。</p>
          <p>服务器搭建在
            <a href="https://www.digitalocean.com/?refcode=eba02656eeb3" target="_blank" class="sponsor_outlink" data-label="digitalocean">
              <img src="//static2.cnodejs.org/public/images/digitalocean.png" title="digitalocean" alt="digitalocean" width="92px">
            </a>
            ，存储赞助商为
            <a href="http://www.qiniu.com/?ref=cnode" target="_blank" class="sponsor_outlink" data-label="qiniu_bottom">
              <img src="//static2.cnodejs.org/public/images/qiniu.png" title="七牛云存储" alt="七牛云存储" width="115px">
            </a>
          </p>
          <p>新手搭建 Node.js 服务器，推荐使用无需备案的 <a href="https://www.digitalocean.com/?refcode=eba02656eeb3">DigitalOcean(https://www.digitalocean.com/)</a></p>
        </div>
      </div>
    </div>
    <div id="backtotop" style="display: block; top: 657px; right: 0px;" @click="handleScrollTop">回到顶部</div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  export default {
    middleware: 'default',
    computed:{
      ...mapGetters({
        userInfo:'user/userInfo'
      })
    },
    methods:{
      handleScrollTop(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
    },
  }
</script>

<style scoped lang="scss">
  .page-enter-active,.page-leave-active{
    transition: all 0.5s;

  }
  .page-enter,.page-leave-active{
    opacity: 0;
    transform: translateX(50px)
  }
</style>
